<template>
  <div class="my-filter-excel">
    <!-- <div class="my-fe-top">
      <ul class="my-fe-menu-group">
        <li class="my-fe-menu-link">
          <span>升序</span>
        </li>
        <li class="my-fe-menu-link">
          <span>倒序</span>
        </li>
      </ul>
      <ul class="my-fe-menu-group">
        <li class="my-fe-menu-link" @click="resetFilterEvent">
          <span>清除筛选</span>
        </li>
        <li class="my-fe-menu-link">
          <i class="fa fa-filter my-fe-menu-link-left-icon"></i>
          <span>筛选条件</span>
          <i class="fa fa-caret-right my-fe-menu-link-right-icon"></i>
          <div class="my-fe-menu-child-list">
            <ul class="my-fe-child-menu-group-list" v-for="(cList, gIndex) in caseGroups" :key="gIndex">
              <li v-for="(cItem, cIndex) in cList" :key="cIndex" class="my-fe-child-menu-item" @click="childMenuClickEvent(cItem)">
                                                                                                <span>{{ cItem.label }}</span>
                                                                                              </li>
                                                                                            </ul>
                                                                                          </div>
                                                                                        </li>
                                                                                      </ul>
                                                                                    </div> -->
    <div class="my-fe-search">
      <div class="my-fe-search-top">
        <vxe-input
          v-model="option.data.sVal"
          placeholder="搜索"
          type="search"
          clearable
        />
        <i class="fa fa-search my-fe-search-icon"></i>
      </div>

      <el-checkbox
        :indeterminate="isIndeterminate"
        v-model="checkAll"
        @change="handleCheckAll"
        >全选</el-checkbox
      >
      <div style="margin: 15px 0"></div>
      <el-checkbox-group
        class="my-fe-search-list"
        v-model="option.data.vals"
        @change="handleCheckedGroup"
      >
        <el-checkbox
          :style="{ display: 'block' }"
          v-for="(val, sIndex) in searchList"
          :label="val"
          :key="sIndex"
          >{{ val }}</el-checkbox
        >
      </el-checkbox-group>
    </div>
    <div class="my-fe-footer">
      <vxe-button status="primary" @click="confirmFilterEvent">确认</vxe-button>
      <vxe-button @click="resetFilterEvent">重置</vxe-button>
    </div>
  </div>
</template>

<script>
import groupBy from "xe-utils/groupBy";
/* eslint-disable */
export default {
  name: "FilterExtend",
  props: {
    params: Object,
  },
  data() {
    return {
      isIndeterminate: true,
      checkAll: false,
      column: null,
      option: null,
      colValList: [],
      // caseGroups: [
      //   [
      //     { value: 'equal', label: '等于' },
      //     { value: 'ne', label: '不等于' }
      //   ],
      //   [
      //     { value: 'greater', label: '大于' },
      //     { value: 'ge', label: '大于或等于' },
      //     { value: 'less', label: '小于' },
      //     { value: 'le', label: '小于或等于' }
      //   ]
      // ]
    };
  },
  computed: {
    searchList() {
      const { option, colValList } = this;
      return option.data.sVal
        ? colValList.filter(
            (val) => val.toLowerCase().indexOf(option.data.sVal) > -1
          )
        : colValList;
    },
  },
  // watch: {
  //     'option.data.sVal'(val) {
  //         console.log(val);
  //     }
  // },
  created() {
    this.load();
  },
  mounted() {
    let checkedCount = this.option.data.vals.length;
    this.checkAll = checkedCount == this.colValList.length;
    this.isIndeterminate =
      checkedCount > 0 && checkedCount < this.colValList.length;
  },
  methods: {
    handleCheckAll(value) {
      //this.searchList 解决搜索时全选把整个数组都选啦的问题
      this.option.data.vals = value ? this.searchList : [];
      //this.option.data.vals = value ? this.colValList : [];
      this.isIndeterminate = false;
    },
    handleCheckedGroup(value) {
      let checkedCount = value.length;

      this.checkAll = checkedCount === this.colValList.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.colValList.length;
    },
    load() {
      const { $table, column } = this.params;
      const { fullData } = $table.getTableData();
      const option = column.filters[0];
      // console.log(option);
      const colValList = Object.keys(groupBy(fullData, column.property));
      this.column = column;
      this.option = option;

      this.colValList = colValList;
    },
    sAllEvent() {
      const { data } = this.option;
      if (data.vals.length > 0) {
        data.vals = [];
      } else {
        data.vals = this.colValList;
      }
    },
    sItemEvent(val) {
      const { data } = this.option;
      const vIndex = data.vals.indexOf(val);
      if (vIndex === -1) {
        data.vals.push(val);
      } else {
        data.vals.splice(vIndex, 1);
      }
    },
    confirmFilterEvent(evnt) {
      const { params, option } = this;
      const { data } = option;
      const { $panel } = params;
      data.f1 = "";
      data.f2 = "";
      console.log(evnt, $panel, option, 1111);
      $panel.changeOption(evnt, true, option);
      $panel.confirmFilter();
    },
    resetFilterEvent() {
      const { $panel } = this.params;
      $panel.resetFilter();
    },
    childMenuClickEvent(cItem) {
      this.$XModal.alert({ content: cItem.label });
    },
  },
};
</script>

<style>
.my-filter-excel {
  user-select: none;
}

.my-filter-excel .my-fe-top .my-fe-menu-group {
  position: relative;
  padding: 0;
  margin: 0;
  list-style: none;
}

.my-filter-excel .my-fe-top .my-fe-menu-group::after {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 190px;
  content: "";
  border-bottom: 1px solid #e2e4e7;
}

.my-filter-excel .my-fe-top .my-fe-menu-group .my-fe-menu-link {
  position: relative;
  padding: 4px 20px 4px 30px;
  cursor: pointer;
}

.my-filter-excel .my-fe-top .my-fe-menu-group .my-fe-menu-link:hover {
  background-color: #c5c5c5;
}

.my-filter-excel .my-fe-top .my-fe-menu-group .my-fe-menu-link-left-icon {
  position: absolute;
  top: 6px;
  left: 10px;
}

.my-filter-excel .my-fe-top .my-fe-menu-group .my-fe-menu-link-right-icon {
  position: absolute;
  top: 6px;
  right: 10px;
}

.my-filter-excel
  .my-fe-top
  .my-fe-menu-group
  .my-fe-menu-link:hover
  .my-fe-menu-child-list {
  display: block;
}

.my-filter-excel
  .my-fe-top
  .my-fe-menu-group
  .my-fe-menu-link
  .my-fe-menu-child-list {
  position: absolute;
  top: 0;
  right: -120px;
  display: none;
  width: 120px;
  background-color: #fff;
  border: 1px solid #dadce0;
  box-shadow: 3px 3px 4px -2px rgb(0 0 0 / 60%);
}

.my-filter-excel
  .my-fe-top
  .my-fe-menu-group
  .my-fe-menu-link
  .my-fe-child-menu-group-list {
  position: relative;
}

.my-filter-excel
  .my-fe-top
  .my-fe-menu-group
  .my-fe-menu-link
  .my-fe-child-menu-group-list::after {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 90px;
  content: "";
  border-bottom: 1px solid #e2e4e7;
}

.my-filter-excel
  .my-fe-top
  .my-fe-menu-group
  .my-fe-menu-link
  .my-fe-child-menu-group-list
  > .my-fe-child-menu-item {
  position: relative;
  padding: 4px 20px 4px 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.my-filter-excel
  .my-fe-top
  .my-fe-menu-group
  .my-fe-menu-link
  .my-fe-child-menu-group-list
  > .my-fe-child-menu-item:hover {
  background-color: #c5c5c5;
}

.my-filter-excel .my-fe-search {
  padding: 0 10px 0 30px;
}

.my-filter-excel .my-fe-search .my-fe-search-top {
  position: relative;
  padding: 5px 0;
}

.my-filter-excel .my-fe-search .my-fe-search-top > input {
  width: 200px;
  height: 22px;
  padding: 0 20px 0 2px;
  line-height: 22px;
  border: 1px solid #ababab;
}

.my-filter-excel .my-fe-search .my-fe-search-top > .my-fe-search-icon {
  position: absolute;
  top: 10px;
  right: 5px;
}

.my-filter-excel .my-fe-search .my-fe-search-list {
  width: 100%;
  height: 140px;

  /* border: 1px solid #E2E4E7; */
  padding: 2px 10px;
  margin: 0;
  overflow: auto;
}

.my-filter-excel .my-fe-search .my-fe-search-list .my-fe-search-item {
  padding: 2px 0;
  cursor: pointer;
}

.my-filter-excel
  .my-fe-search
  .my-fe-search-list
  .my-fe-search-item
  .my-fe-search-item-icon {
  width: 16px;
}

.my-filter-excel .my-fe-footer {
  padding: 10px 10px 10px 0;
  text-align: right;
}

.my-fe-popup .my-fe-popup-filter {
  padding-left: 30px;
}

.my-fe-popup .my-fe-popup-filter > .my-fe-popup-filter-select {
  width: 120px;
}

.my-fe-popup .my-fe-popup-filter > .my-fe-popup-filter-input {
  width: 380px;
  margin-left: 15px;
}

.my-fe-popup .my-fe-popup-describe {
  padding: 20px 0 10px;
}

.my-fe-popup .my-fe-popup-concat {
  padding-left: 50px;
}

.my-fe-popup .my-fe-popup-footer {
  text-align: right;
}
</style>
